export const barY = () => {
    return `
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option: {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        show: false,
      },
      grid: {
        left: "3%",
        right: "10%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
     
        axisTick: { show: false },
        axisLabel: {
          color: "#D3E4FE",
        },
  
        data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
      },
      yAxis: {
        type: "value",
        
        name: "(个)",
        nameLocation: "end",
        nameGap: 35,
        boundaryGap: [0, 0.01],
        nameTextStyle: {
          fontSize: 12,
          color: "#999999",
        },
        splitLine: {
          lineStyle: {
            color: "#073370",
            width: 1,
            type: "dashed",
          },
        },
        axisLabel: {
          color: "#D3E4FE",
        },
        axisLine: {
          lineStyle: {
            color: "#073370",
            width: 1,
          },
        },
      },
      series: [
        {
          name: "2011",
          barWidth: 18,
          type: "bar",
          data: [1000, 2348, 2904, 1049, 1744, 6230],
          label: {
            show: true,
            precision: 1,
            position: "top",
            valueAnimation: true,
            color: "#D3E4FE",
            fontFamily: "monospace",
          },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 1,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(63,117,255,0)" },
                { offset: 1, color:"#00AAFA" },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    },
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    `;
  };
  